<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta charset="UTF-8">
    <meta http-equiv="Cache-Control" content="max-age=7200" />
    <meta name="format-detection" content="telephone=yes">
    <meta name="viewport" content="width=device-width, maximum-scale=1.0, user-scalable=no">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="icon" href="https://static.jianshukeji.com/highcharts/images/favicon.ico">

    <style type="text/css">
        #container {
            height: 90vh;
            margin: 0 auto;
        }
    </style>
    <script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
    <script src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script>
    <script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
    <script type="text/javascript" src="/static/ajz/js/jquery.min.js" ></script>
</head>
<body>
<div id="container" style="min-width:400px;height:550px"></div>
<script type="text/javascript">
    $(document).ready(function() {
        var msg = 'person';
        $.ajax({
            url: "/a/ajz/ajzBaseinfo/findCompanyByArea",
            type: "POST",
            data: "msg="+msg,
            dataType: "json",
            async: true,
            success: function (map) {

                var second_grid_pre = parseInt(map.second_grid_pre);
                var first_grid_pre = parseInt(map.first_grid_pre);
                var third_grid_pre= parseInt(map.third_grid_pre);
                var xianglu_pre = parseInt(map.xianglu_pre);
                var xiayang_pre = parseInt(map.xiayang_pre);
                var xinwan_pre = parseInt(map.xinwan_pre);
                var firs_farm_pre = parseInt(map.firs_farm_pre);
                var yanjie_pre = parseInt(map.yanjie_pre);
                var other_pre = parseInt(map.other_pre);
                var xinan_pre = parseInt(map.xinan_pre);
                getDate(first_grid_pre,second_grid_pre,third_grid_pre,xianglu_pre,xiayang_pre,xinwan_pre,xinan_pre,firs_farm_pre,yanjie_pre,other_pre);
            }
        });
    });

    function getDate(a,b,c,d,e,f,g,h,i,j) {
        // 创建渐变色
        Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function (color) {
            return {
                radialGradient: {cx: 0.5, cy: 0.3, r: 0.7},
                stops: [
                    [0, color],
                    [1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
                ]
            };
        });
        // 构建图表
        var chart = Highcharts.chart('container', {
            title: {
                text: '单位分布图'
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true,
                        format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                        style: {
                            color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                        },
                        connectorColor: 'silver'
                    }
                }
            },
            series: [{
                type: 'pie',
                name: '单位占比',
                data: [
                    ['第一网格', a],
                    ['第二网格', b],
                    {
                        name: '第三网格',
                        y: c,
                        sliced: true,
                        selected: true
                    },
                    ['祥露社区', d],
                    ['霞阳社区', e],
                    ['其他网格', j]
                ]
            }]
        });
    }
</script>
</body>
</html>